define(["module", "ol3-debug", "../Tile", "react", "../layers/ImageTransform2"], function (module, ol, Tile, React) {
    "use strict";

    ol.layer.CollectionLayer = function (options) {
        ol.layer.Layer.call(this, options || {});
    };
    ol.inherits(ol.layer.CollectionLayer, ol.layer.Layer);

    ol.layer.CollectionLayer.prototype.getSource;
    ol.layer.CollectionLayer.prototype.add = function (image) {
        this.get("map").addLayer(image);
    };

    var fun = ol.renderer.canvas.Map.prototype.createLayerRenderer;
    ol.renderer.canvas.Map.prototype.createLayerRenderer = function (layer) {
        if (ol.ENABLE_IMAGE && layer instanceof ol.layer.Image) {
            return new ol.renderer.canvas.ImageLayer(layer);
        } else if (ol.ENABLE_TILE && layer instanceof ol.layer.Tile) {
            return new ol.renderer.canvas.TileLayer(layer);
        } else if (ol.ENABLE_VECTOR_TILE && layer instanceof ol.layer.VectorTile) {
            return new ol.renderer.canvas.VectorTileLayer(layer);
        } else if (ol.ENABLE_VECTOR && layer instanceof ol.layer.Vector) {
            return new ol.renderer.canvas.VectorLayer(layer);
        } else if (ol.ENABLE_IMAGE && layer instanceof ol.layer.CollectionLayer) {
            return new ol.renderer.canvas.Layer(layer);
        } else {
            ol.DEBUG && console.assert(false, 'unexpected layer configuration');
            return null;
        }
    };

    var InitPage = React.createClass({
        displayName: "InitPage",
        componentDidMount: function componentDidMount() {
            var map = new ol.Map({
                target: 'map',
                layers: [new ol.layer.Tile({
                    source: new ol.source.OSM()
                })],
                view: new ol.View({
                    center: ol.proj.fromLonLat([116, 41]),
                    zoom: 4
                })
            });

            var layer = new ol.layer.CollectionLayer({
                map: map
            });
            map.addLayer(layer);

            var wkt = "POLYGON((115.707 40.2429,116.132 40.159,116.024 39.8428,115.602 39.9264,115.707 40.2429))";
            var format = new ol.format.WKT();
            var feature = format.readFeature(wkt, {
                dataProjection: 'EPSG:4326',
                featureProjection: 'EPSG:3857'
            });

            layer.add(new ol.layer.Image({
                source: new ol.source.ImageTransform({
                    url: "../data/GF1_PMS1_E115.8_N40.0_20130627_L1A0000177393-PAN1/GF1_PMS1_E115.8_N40.0_20130627_L1A0000177393-PAN1.jpg",
                    crossOrigin: '',
                    projection: "EPSG:3857",
                    imageExtent: feature.getGeometry().getExtent(),
                    targetPolygon: feature.getGeometry(),
                    direction: ol.source.ImageTransform.DIRECTION.RIGHT_UP
                })
            }));
        },
        render: function render() {
            return React.createElement(
                "div",
                { className: "container" },
                React.createElement(
                    Tile,
                    { header: "初始化" },
                    React.createElement("div", { id: "map" })
                )
            );
        }
    });

    module.exports = InitPage;
});
